{extends file="../home.html"}
{block name="title"}{$head_title}{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<link href="__PUBLIC__/Css/front/css/louzhu.css?version={$version}" type="text/css" rel="stylesheet">
<style type="text/css">
body{
	background: #F3F3F3;
}
/*全屏查看器样式*/
.fullscreen{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
	background-color: #000;
	display: none;
}
.fullscreen .fullscreen_slide{
	background-color: #000;
}
</style>
{/block}
{block name="content"}

	
<div class="com_header">
	<a href="javascript:;" class="go_back"><i class="icon_back"></i></a>众筹贴<span class="louzhu">只看楼主</span>
</div>

<div id="load_wrapper" style="margin-top: 2.2rem;margin-bottom: 2.5rem">
	<div id="#scroller">
	<div id="pullDown">
	    <span class="pullDownIcon"></span>
	</div>

	<div class="user_header clearfix" >
		 <a href="javascript:;" class="avatar">
		 	<img src="/Public/Images/img/icon-hone-chou-50@3x.png" alt="">
		 </a>
		 <div class="user_main clearfix">
		 	<span class="nickname">花花世界</span>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 </div>
		 <p>06-15<span class="type">众筹频道</span></p>
		 <!-- 成功图标 -->
		 <div class="zhonchou_succ"></div>
		 <!-- 失败图标 -->
		 <div class="zhonchou_fail"></div>
	</div>
	<div class="post_content">
		<h2>世界很美，而你刚好有空</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae unde dicta facilis porro distinctio quaerat incidunt et mollitia dolorum laborum. Beatae, possimus voluptatem a? Debitis consequuntur corporis, reprehenderit sint assumenda!</p>
		<div class="post_img">
			<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt="">
			<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt="">
			<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="3"  data-img="/Public/Images/img/Mask@3x.png" alt="">
		</div>
	</div>
	
	<div class="zhonchou_main">
		<div class="zhonchou_main_top">
			<div class="price">
				<span class="total">心愿总价：¥1000</span><span class="current">已筹金额：¥500</span>
			</div>
			<div class="p1" >
				<p class="p2" data-width="10"></p>
			</div>
			<p class="bottom"><span>支持：<strong>8人</strong></span><span>剩余天数：<strong>10天</strong></span><span>已完成 <strong>50%</strong></span></p>
		</div>
		<div class="zhonchou_main_bot">
			<!-- 楼主回帖 -->
			<a href="/Index/louzhou_reply" class="btn_huitie">楼主回帖</a>
		</div>
	</div>

	<div class="zhonchou_people">
		<div class="people_top clearfix">
			<a href="javascript:;" class="avatar">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
				<span class="icon_best"></span>
			</a>
			<span class="nickname">
				赞赏世界
			</span>
			<!-- 黄色-->
			<!-- <span class="best">最佳金主</span> -->
			<!-- 灰色状态 -->
			<span class="best_gray">最佳金主</span>
			
		</div>
		<div class="people_bot clearfix">
			<span>参与人员</span> 
			<a href="javascript:;">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
			</a>
			<a href="javascript:;">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
			</a>
			<a href="javascript:;">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
			</a>
			<a href="javascript:;">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
			</a>
			<a href="javascript:;">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
			</a>
			<a href="javascript:;">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
			</a>
			<a href="javascript:;">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
			</a>
			<a href="javascript:;">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
			</a>
			<a href="javascript:;">
				<img src="/Public/Images/img/Mask@3x.png" alt="">
			</a>
			<i class="icon_zhankai"></i>
		</div>
	</div>

	<div class="user_comment">
		<h5 class="comment_title">用户评论（2）</h5>
		<div class="comment_list">
			<div class="comment_item">
				<div class="comment_top">
					<a href="javascript:;" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
						<!-- <span class="lz_tag">楼主</span> -->
						<span class="jd_tag">鉴定师</span>
					</a>
					<div class="comment_user">
						<div class="user_info">
							<span class="nickname">天生偏执狂</span>
							<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i> 
						</div>
						<div class="other clearfix">
							<span class="floor">2楼</span>
							<span class="time">22:58</span>
							<span class="zan_num">10</span>
							<i class="icon_zan"></i>
							<i class="icon_pl"></i>
						</div>
						<div class="text">
							我还能说什么，我也很无奈啊。
						</div>
						<ul class="imgbox clearfix">
							<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
								<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
								<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="3"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
						</ul>
					</div>
				</div>
				
				<div class="comment_cont">
					<ul>
						<li><span class="nick">老奶奶都不服就服你：</span>                           我能怎么办，当然是选择原来他啦</li>
					</ul>
				</div>
			</div>

		
		</div>
	</div>

		<div id="pullUp">
			<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
		</div>
	</div>
</div>
<div class="fixed_footer">
	<div class="input">
		我也来说一句…
	</div>
	<i class="zan"></i>
	<i class="coll"></i>
	<i class="share"></i>
</div>


<!-- 查看参与人员 -->
<div class="look_people">
	<div class="mask"></div>
	<div class="people_content">
		<h2 class="title"><span class="close" id="guanbi">关闭</span>众筹参与人员</h2>
		<div class="people_wrapper" id="people_wrapper">
			<ul class="people_list">
				<li>
					<a href="javascirt::" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
					</a>
					<div class="people_main">
						<!--   最佳金主 黄色  -->
						<h2 class="clearfix"><span class="nick">人间四月</span>
						<span class="jingzhu">最佳金主</span>
						<!--  众筹失败后 最佳金主 灰色的  -->
						<!-- <span class="jingzhu_gray">人间四月</span> -->
						</h2>
						
						<p>2016.11.11 11:11:00</p>
						<div class="money">众筹金：100元</div>
					</div>
				</li>
				<li>
					<a href="javascirt::" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
					</a>
					<div class="people_main">
						<h2 class="clearfix"><span class="nick">人间四月</span></h2>
						<p>2016.11.11 11:11:00</p>
						<div class="money">众筹金：100元</div>
					</div>
				</li>
				<li>
					<a href="javascirt::" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
					</a>
					<div class="people_main">
						<h2 class="clearfix"><span class="nick">人间四月</span></h2>
						<p>2016.11.11 11:11:00</p>
						<div class="money">众筹金：100元</div>
					</div>
				</li>
				<li>
					<a href="javascirt::" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
					</a>
					<div class="people_main">
						<h2 class="clearfix"><span class="nick">人间四月</span></h2>
						<p>2016.11.11 11:11:00</p>
						<div class="money">众筹金：100元</div>
					</div>
				</li>
				<li>
					<a href="javascirt::" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
					</a>
					<div class="people_main">
						<h2 class="clearfix"><span class="nick">人间四月</span></h2>
						<p>2016.11.11 11:11:00</p>
						<div class="money">众筹金：100元</div>
					</div>
				</li>
				<li>
					<a href="javascript::" class="no_more">——&nbsp;没有更多了&nbsp;——</a>
				</li>
			</ul>
		</div>
		
	</div>
</div>
<!-- 全屏图片查看器-->
<div class="swiper-container fullscreen" id="fullscreen">
	<div class="swiper-wrapper" id="swiper_wrapper">
	</div>
</div>
{/block}
{block name="js"}

{literal}
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/js/louzhu_load.js"></script>	
<script>
	var total = 1;
    var firstRow = 1;

	$(function(){
		// 百分比
		$('.p2').width($('.p2').attr("data-width")+"%")

		//点赞
		$('.icon_zan').on('click',function(){
			$(this).toggleClass('hover');
			if ($(this).hasClass('hover')) {
				var zan_num = parseInt($(this).parent().find('.zan_num').html())+1;
				$(this).parent().find('.zan_num').html(zan_num);
			}else{
				var zan_num = parseInt($(this).parent().find('.zan_num').html())-1;
				$(this).parent().find('.zan_num').html(zan_num);
			}
		})
		//展开参与人员
		$('.icon_zhankai').on('click',function(){
			$('.look_people').show();
			//列表滚动
			var list = new iScroll('people_wrapper');
			setTimeout(function(){
	            list.refresh();
	        },500);
		})
		//关闭参与
		$('#guanbi').on('click',function(){
			$('.look_people').hide()
		})

		//点赞和收藏
		$('.zan').on('click',function(){
			$(this).toggleClass('active');
		})
		$('.coll').on('click',function(){
			$(this).toggleClass('active');
		})

		//只看楼主
		$('.louzhu').on('click',function(){
			$(this).toggleClass('active');
		})
		//图片正方形
		var imgw = $('.imgbox li').width()
		imgh = $('.imgbox li').height(imgw);
		//图片查看器
		$(function(){
			$('.post_img').on('click', 'img', function(event){
				event.preventDefault();
				var row = $(this).data('row');
				var img_urls = [];

				$(this).parent().find('img').each(function() {        
				    img_urls.push($(this).data("img"));
				});
				var html = '';
				for(i=0;i<img_urls.length;i++){
					html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
				}
				$('#swiper_wrapper').empty().append(html);

				$('#fullscreen').show();
				var full_swiper = new Swiper('.fullscreen',{
				    //pagination : '.full_pagination',
				});
				full_swiper.slideTo(row, 0, false);
				
			});
			// 关闭查看器
			$('#fullscreen').on('click', function(event) {
				event.preventDefault();
				$(this).hide();
			});
		})
		//2
		$(function(){
			$('.user_comment').on('click', '.img', function(event){
				event.preventDefault();
				var row = $(this).data('row');
				var img_urls = [];
				console.log($(this).parent().parent())
				$(this).parent().parent().find('.img').each(function() {        
				    img_urls.push($(this).data("img"));
				});
				var html = '';
				for(i=0;i<img_urls.length;i++){
					html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
				}
				$('#swiper_wrapper').empty().append(html);
				console.log(img_urls);
				$('#fullscreen').show();
				var full_swiper = new Swiper('.fullscreen',{
				    //pagination : '.full_pagination',
				});
				full_swiper.slideTo(row, 0, false);
				
			});
			// 关闭查看器
			$('#fullscreen').on('click', function(event) {
				event.preventDefault();
				$(this).hide();
			});
		})
		
	})
</script>
{/literal}
{/block}